<template>
  <div class="order-details">
    <a-card title="订单详情">
      <a-spin :spinning="loading">
        <div class="status-section">
          <div class="status">{{ statusText }}</div>
          <div class="status-desc">{{ statusDesc }}</div>
        </div>

        <div class="order-info">
          <a-card class="info-section" title="买家信息">
            <div class="user-card">
              <a-avatar :size="50" :src="orderData?.buyerAvatar" />
              <div class="user-info">
                <div class="username">{{ orderData?.buyerName }}</div>
                <div class="user-id">ID:{{ orderData?.buyerId }}</div>
                <!-- 后端暂时拿不到，暂时不展示 -->
                <!-- <div class="contact">
                  <div>手机号码：-</div>
                  <div>注册时间：-</div>
                  <div>最近登录时间：-</div>
                </div> -->
              </div>
              <a @click="contactSeller">联系用户</a>
            </div>
          </a-card>

          <a-card class="info-section" title="卖家信息">
            <div class="user-card">
              <a-avatar :size="50" :src="orderData?.sellerAvatar" />
              <div class="user-info">
                <div class="username">{{ orderData?.sellerName }}</div>
                <div class="user-id">ID:{{ orderData?.sellerId }}</div>
                <!-- 后端暂时拿不到，暂时不展示 -->
                <!-- <div class="contact">
                  <div>手机号码：-</div>
                  <div>注册时间：-</div>
                  <div>最近登录时间：-</div>
                </div> -->
              </div>
              <a @click="contactSeller">联系用户</a>
            </div>
          </a-card>

          <a-card class="info-section" title="订单信息">
            <a-descriptions :column="1">
              <a-descriptions-item label="订单编号">{{ orderData?.orderNo }}</a-descriptions-item>
              <a-descriptions-item label="下单时间">{{ orderData?.orderTime }}</a-descriptions-item>
              <a-descriptions-item label="结算时间" v-if="orderData?.settleTime">{{ orderData?.settleTime }}</a-descriptions-item>
              <a-descriptions-item label="订单状态">{{ statusText }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
        </div>

        <a-card class="product-info" title="产品信息">
          <a-table
            :columns="columns"
            :data-source="[
              {
                key: '1',
                name: orderData?.productName,
                type: orderData?.dataClassification,
                description: orderData?.productDetail,
                price: orderData?.priceAmount,
              },
            ]"
            :bordered="true"
          >
            <template #bodyCell="{ column }">
              <template v-if="column.key === 'action'">
                <a-button type="link" @click="handleClick()">查看</a-button>
              </template>
            </template>
          </a-table>
          <div class="payment-info">
            已支付：<span class="price">{{ orderData?.orderTotal }}</span>
          </div>
        </a-card>
      </a-spin>

      <a-button class="back" style="margin-top: 20px" @click="pageBack()">返回</a-button>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { requestorderDetail } from '/@/api/exchange/trade'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import router from '/@/router'

  // 修改状态文本计算逻辑
  const statusText = computed(() => {
    const statusMap = {
      1: '已下单（待支付）',
      2: '已支付（待确认）',
      3: '已完成',
    }
    return statusMap[orderData.value?.orderStatus || 1]
  })

  // 根据订单状态计算描述文本
  const statusDesc = computed(() => {
    return orderData.value?.orderStatus === 2 ? '已购买，等待确认结算' : '交易已完成'
  })

  // 表格列配置
  const columns = [
    {
      title: '产品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '描述',
      width: 500,
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '操作',
      key: 'action',
    },
  ]

  const route = useRoute()
  const orderData = ref<TradeTypes.OrderDetail>()
  const loading = ref(false)

  /**
   * 获取订单详情
   * @param orderId 订单ID
   */
  const getOrderDetail = async (orderId: string) => {
    try {
      loading.value = true
      const { responseData, responseCode } = await requestorderDetail(orderId)
      if (responseCode === HttpCodeEnum.SUCCESS && responseData) {
        orderData.value = responseData
      }
    } catch (error) {
    } finally {
      loading.value = false
    }
  }

  // 组件挂载时获取订单详情
  onMounted(() => {
    const orderId = route.params.orderId as string
    if (orderId) {
      getOrderDetail(orderId)
    }
  })

  /**
   * 处理产品查看点击事件
   * @param record 产品记录
   */
  const handleClick = () => {
    router.push({
      path: `/data-product/detail`,
      query: { id: orderData.value?.productId },
    })
  }
  /* 联系卖家 */
  const contactSeller = () => {
    router.push({
      path: `/chat/index`,
    })
  }

  /* 返回 */
  const pageBack = () => {
    router.back()
  }
</script>

<style lang="less" scoped>
  .order-details {
    padding: 20px;
    background: #fff;

    .status-section {
      margin-bottom: 20px;

      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .status {
        font-size: 16px;
        color: #1890ff;
        margin-bottom: 5px;
      }

      .status-desc {
        color: rgb(0 0 0 / 45%);
      }
    }

    .order-info {
      display: flex;
      gap: 15px;

      .info-section {
        flex: 1;
        min-width: 0;
      }
    }

    .user-card {
      display: flex;
      align-items: flex-start;
      gap: 15px;

      .user-info {
        flex: 1;

        .username {
          font-size: 16px;
          font-weight: bold;
        }

        .user-id {
          color: rgb(0 0 0 / 45%);
          margin: 5px 0;
        }

        .contact {
          color: rgb(0 0 0 / 45%);
          font-size: 14px;

          > div {
            margin: 3px 0;
          }
        }
      }
    }

    .product-info {
      .payment-info {
        text-align: right;
        margin-top: 20px;
        font-size: 14px;

        .price {
          color: #ff4d4f;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
</style>
